<template>
  <div class="iframe-box" :style="{ height: winHeight, width: winWidth }">
    <iframe
      :id="iframeId"
      class="shadow-sm"
      name="iframe"
      title="iframe"
      width="100%"
      :height="height"
      :src="url"
    />
  </div>
</template>
<script>
export default {
  props: {
    iframeId: {
      type: String,
      default: 'myIframeId'
    },
    onload: {
      type: Function,
      default: function() {
        console.log('iframe加载完成')
      }
    },
    winHeight: {
      type: String,
      default: '100%'
    },
    winWidth: {
      type: String,
      default: '100%'
    },
    url: {
      type: String,
      default: '/fr/index.html'
    }
  },
  data() {
    return {
      height: '100%'
    }
  },
  mounted() {
    let index = 0
    let timer = setInterval(() => {
      const iframe = document.getElementById(this.iframeId).contentWindow
      // console.log(iframe, 'iframe');
      if (iframe.MapEvent) {
        iframe.MapEvent.on('loadMap', ({ Cesium, Comp, viewer }) => {
          clearInterval(timer)
          timer = null
          this.onload(Cesium, Comp, viewer, iframe)
          console.log('xxx', '地图加载')
        })
        if (
          iframe.Cesium &&
          iframe.Comp &&
          iframe.Viewer &&
          timer &&
          index > 10
        ) {
          const { Cesium, Comp, Viewer } = iframe
          clearInterval(timer)
          timer = null
          this.onload(Cesium, Comp, Viewer, iframe)
        }
        index += 1
      }
    }, 200)
    return () => {
      if (timer) {
        clearInterval(timer)
        timer = null
      }
    }
  }
}
</script>
<style>
.iframe-box {
  overflow: hidden;
}
.shadow-sm {
  border: none;
  /* 或者使用更具体的样式来移除边框 */
  border-width: 0;
  border-style: none;
}
</style>
